﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Codeflows Dashboard</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le styles -->
    <link href="Assets/CSS/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        html, body
        {
            background-color: #eee;
        }
        body
        {
            padding-top: 40px;
        }
        .container > footer p
        {
            text-align: center;
        }
        
        .container > .content
        {
            background-color: #fff;
            padding: 20px;
            margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
            -webkit-border-radius: 0 0 6px 6px;
            -moz-border-radius: 0 0 6px 6px;
            border-radius: 0 0 6px 6px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
        }
        
        .statistics .well 
        {
            padding: 0;
            text-align: center;
        }
        
        .statistics .well p 
        {
        	font-size: 18px;
        }
    </style>
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
    <div class="topbar">
        <div class="fill">
            <div class="container">
                <a class="brand" href="/">Codeflows</a>
                <ul class="nav">
                    <li class="active"><a href="/">Home</a></li>
                    <li><a href="http://codeflows.codeplex.com">About</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content">

            <h1>Overview</h1>
            <div class="row">
                <div class="span16">
                    <div class="row statistics">
                        <div class="span4">
                            <div class="well">
                                <h4>Total</h4>
                                <p id="codeflows-total">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>New</h4>
                                <p id="codeflows-new">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>Runnable</h4>
                                <p id="codeflows-runnable">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>Running</h4>
                                <p id="codeflows-running">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="row statistics">
                        <div class="span4">
                            <div class="well">
                                <h4>Paused</h4>
                                <p id="codeflows-paused">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>Sleeping</h4>
                                <p id="codeflows-sleeping">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>Successful</h4>
                                <p id="codeflows-successful">0</p>
                            </div>
                        </div>
                        <div class="span4">
                            <div class="well">
                                <h4>Failed</h4>
                                <p id="codeflows-failed">0</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

			<br />

			<h1>Recent Codeflows</h1>
			<table class="bordered-table zebra-striped">
				<thead>
					<tr>
						<th>Type</th>
						<th>Status</th>
						<th>Created On</th>
						<th>Started At</th>
						<th>Locked Until</th>
						<th>Current Action</th>
					</tr>
				</thead>
				<tbody id="codeflowInstances">
				</tbody>
			</table>
			<script id="codeflowInstanceTemplate" type="text/x-jquery-tmpl">
				<tr>
					<td>${FriendlyName}</td>
					<td>${StatusString}</td>
					<td>${CreatedOnUtcDisplay}</td>
					<td>${StartedAtUtcDisplay}</td>
					<td>${LockedUntilUtcDisplay}</td>
					<td>${ActionName}</td>
				</tr>
			</script>
        </div>
        <footer>
        <p>&copy; Codeflows 2011</p>
      </footer>
    </div>
    <script src="ASSETS/JS/jquery.min.js"></script>
	<script src="ASSETS/JS/jquery.tmpl.min.js"></script>
    <script>
    	var loadOverview = function () {
    		$.ajax('/overview', {
    			cache: false,
    			success: function (data) {
    				populateCodeflowStatistics(data);
    				populateRecentCodeflows(data);

    				setTimeout(loadOverview, 5000);
    			}
    		});
    	};

        var populateCodeflowStatistics = function (data) {
			$("#codeflows-total").html(data.TotalCodeflows);
			$("#codeflows-new").html(data.NewCodeflows);
			$("#codeflows-running").html(data.RunningCodeflows);
			$("#codeflows-runnable").html(data.RunnableCodeflows);
			$("#codeflows-paused").html(data.PausedCodeflows);
			$("#codeflows-sleeping").html(data.SleepingCodeflows);
			$("#codeflows-successful").html(data.SuccessfulCodeflows);
			$("#codeflows-failed").html(data.FailedCodeflows);
		};

        var populateRecentCodeflows = function(data) {
        	$('#codeflowInstances').empty();
        	$('#codeflowInstanceTemplate').tmpl(data.RecentCodeflows).appendTo('#codeflowInstances');
        };
		
        $(function () {
        	loadOverview();
        });
    </script>
</body>
</html>
